<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人名片</title>
</head>
<style>

    .card_a {
        width:800px;
        height: 460px;
        /* absolute 是基于父元素定位的  relative是相对于页面， */  
        position: absolute;
        left: 50%;
        top: 40%;
        margin-top: -230px;
        margin-left: -400px;
        background: #efe6f1;
        /* 这个overflow属性之后有待研究 */
        overflow: hidden;
        border-radius: 10px;
        /* 实现色彩渐变 */
        background: linear-gradient(45deg, #f8a8b9, #8be9f6);
    }

    .card_a section {
        width: 600px;
        position: absolute;
        left: 100px;
        top: 80px;
        z-index: 9;
    }
    .card_a section h2{
        font-size: 50px;
        letter-spacing: .1em;
        margin-bottom: 66px;
    }

    .card_a section span {
        font-size: 28px;
        font-weight: normal;
        margin-left: 50px;
        letter-spacing: normal;
    }

    .card_a img {
        float: right;
        width: 140px;
    }
    .card_a section ul {
        border-left: #222 3px solid;
        padding-left: 28px;
    }
    .card_a section ul li {
        list-style: none;
        line-height: 38px;
        font-size: 18px;
    }


</style>

<body>

    <div class="card_a">
    <section>
        <h2>宋宇诚<span>前端设计师</span></h2>
        <img src="./333.png" alt="">
        <ul>
            <li>电话 / 1987377xxxx</li>
            <li>邮箱 / xxxxxx@qq.com</li>
            <li>地址 / 陕西西安</li>
            <li>网址 / www.xxxxx.com</li>
          </ul>

    </section>
</div>

    <!-- // 最顶层父元素 -->
    <!-- <div> 



    </div> -->

    
</body>
</html>


